<template>
  <teleport to="html"
    ><div
      class="getBack"
      :style="{ top: props.top, left: props.left, bottom: props.bottom, right: props.right }"
      @click="routerJump(props.backRouterMode)"
    >
      <el-icon class="icon" :size="props.icon.iconSize" :color="props.icon.iconColor">
        <component :is="props.icon.iconName" />
      </el-icon></div
  ></teleport>
</template>

<script setup lang="ts">
import useRouterJump from "@/hooks/useRouterJump"
import type { IGetBackInfo } from "./type"

const props = withDefaults(defineProps<IGetBackInfo>(), {
  top: "3%",
  left: "2%",
  icon: () => ({
    iconName: "ArrowLeftBold",
    iconColor: "#888",
    iconSize: "32px"
  }),
  backRouterMode: "back"
})

const { routerJump } = useRouterJump()
</script>

<style lang="less" scoped>
.getBack {
  z-index: 1000;
  position: fixed;
}
</style>
